<template>
  <el-menu
    active-text-color="#ffd04b"
    class="el-menu-vertical-demo"
    :default-active="currentPath" 
    text-color="black"
    router
    :collapse="!flag"
  >
    <el-sub-menu index="/user">
      <template #title>
        <el-icon><User /></el-icon>
        <span>角色权限</span>
      </template>
      <el-menu-item index="/user/userlist">用户管理</el-menu-item>
      <el-menu-item index="/user/rolemanage">角色管理</el-menu-item>
      <el-menu-item index="/user/departmanage">部门管理</el-menu-item>
    </el-sub-menu>

    <!-- 中途增加 -->
    <el-sub-menu index="">
      <template #title>
        <el-icon><View /></el-icon>
        <span>客户管理</span>
      </template>
      <el-menu-item index="/client/clientlist">客户列表</el-menu-item>
      <el-menu-item index="/client/clientlv">成长等级</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/prolist">
        <el-icon><Goods /></el-icon>
      <span>商品列表</span>
    </el-menu-item>

    <el-menu-item index="/prorecomend">
      <el-icon><Star /></el-icon>
      <span>商品推荐</span>
    </el-menu-item>

    <el-sub-menu index="/banner">
      <template #title>
        <el-icon><Operation /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/banner/bannerlist">轮播图管理</el-menu-item>
      <el-menu-item index="/banner/ProductReviews">商品评论管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import {
  User,
  Goods,
  Star,
  View,
  Operation

} from '@element-plus/icons-vue';
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  components: {
    User,
    Goods,
    Star,
    View,
    Operation
  },
  props: {
    flag: {
      type: Boolean,
    },
  },
  computed: {
    ...mapState(['currentPath']),
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>
